// 联系人选择
.contact-select-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $clr-bg;
  transform: translateX(100%);
  transition: all .3s;
  &.show {
    transform: translateX(0);
  }
  .gzl-cell__title {
    color: $clr-g3;
  }
  .contact-add {
    line-height: px(44);
    background: $clr-white;
    text-align: center;
    font-size: px(16);
    color: $clr-active;
    margin-bottom: px(10);
  }
  .contact-list {
    li {
      padding: px(16);
      background: $clr-white;
      align-items: center;
      &:not(:first-child) {
        margin-top: px(10);
      }
      .contact-check,
      .contact-edit {
        color: #999;
        font-size: px(20);
      }
      .contact-check {
        color: #999;
        margin-right: px(12);
      }
      .contact-edit {
        margin-left: px(25);
      }
      .contact-name {
        font-size: px(16);
        max-width: px(150);
        margin-right: px(12);
        @include ellipsis;
      }
      .contact-tel {
        font-size: px(16);
      }
      .contact-code {
        font-size: px(12);
        color: $clr-g9;
        margin-top: px(6);
      }
      .contact-tip {
        font-size: px(12);
        margin-top: px(6);
      }
    }
  }
  .gzl-footbar {
    padding: px(8) px(20);
    .gzl-flex__item:not(:first-child) {
      margin-left: px(15);
    }
  }
}
.contact-edit-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $clr-bg;
  transform: translateX(100%);
  transition: all .3s;
  &.show {
    transform: translateX(0);
  }
}